<!-- 软件21H02 李垣辉 2021010511 -->
<template>
    <div class="box">
        <div class="header">
            <span>课程管理</span>/
            <span>录播课程</span>
        </div>
        <div class="containe">
            <div class="card">
                <p><span>18</span>门</p>
                <p>课程数量</p>
                <img src="/images/课程.png" alt="">
            </div>
            <div class="card">
                <p><span>145</span>人</p>
                <p>课程学员</p>
                <img src="/images/学员.png" alt="">
            </div>
            <div class="card">
                <p><span>99.9</span>G</p>
                <p>存储空间</p>
                <img src="/images/空间.png" alt="">
            </div>
            <div class="card">
                <p><span>94.34</span>G</p>
                <p>剩余流量</p>
                <img src="/images/流量.png" alt="">
            </div>
        </div>
        <div class="body">
            <div class="btn">
                <el-button type="primary"><el-icon>
                        <IEpPlus />
                    </el-icon>新增课程</el-button>
                <el-button class="btn-small">移动到分类</el-button>
                <el-button class="btn-small"><el-icon>
                        <IEpDeleteFilled />
                    </el-icon>删除课程</el-button>
                <el-input v-model="input1" style="width: 200px" placeholder="搜索课程" :suffix-icon="Search" class="mr-2" />
            </div>
            <div class="num">
                <el-checkbox v-model="checked1" label="全选" size="large" />
                <el-pagination size="small" background :hide-on-single-page="value" :total="5"
                    layout="prev, pager, next" />/1页<span>|</span>显示
                <el-dropdown>
                    <span class="el-dropdown-link">
                        30
                        <el-icon class="el-icon--right">
                            <IEparrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>10</el-dropdown-item>
                            <el-dropdown-item>20</el-dropdown-item>
                            <el-dropdown-item>30</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>条记录<span>|</span>共4条数据记录
                <el-dropdown>
                    <span class="el-dropdown-link el-dropdown-link-two ">
                        新建日期
                        <el-icon class="el-icon--right el-icon--right-two">
                            <IEparrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>2024年9月26日</el-dropdown-item>
                            <el-dropdown-item>2024年9月25日</el-dropdown-item>
                            <el-dropdown-item>2024年9月24日</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="big-box">
                <div class="hidding">
                    <div class="course">
                        <div class="left">
                            <el-checkbox v-model="checked1" size="large" class="checkbox" />
                            <div class="left-img">
                                <img src="/images/课程01.jpg" alt="">
                            </div>
                            <div class="right-text">
                                <h4>新员工入职培训☆☆☆☆☆</h4>
                                <p>入职培训</p>
                                <p>课程长约：0分0秒 | 共<span>2</span>个章节</p>
                                <p>系统管理员创建于2022/6/28上次更新：2022/7/12</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="number">
                                <div>
                                    <p>0</p>
                                    <p>课程收入</p>
                                </div>
                                <div>
                                    <p>4</p>
                                    <p>学习人数</p>
                                </div>
                                <div>
                                    <p>6</p>
                                    <p>访问人数</p>
                                </div>
                            </div>
                            <div class="all-btn">
                                <el-button class="all-btn-small">置顶课程</el-button>
                                <el-button class="all-btn-small">编辑章节</el-button>
                                <el-button class="all-btn-small">学习记录</el-button>
                                <el-button class="all-btn-small">统计分析</el-button>
                                <el-button class="all-btn-small">设置</el-button>
                                <el-button class="all-btn-small">更多<el-icon class="el-icon--right el-icon--right-more">
                                        <IEparrow-down />
                                    </el-icon></el-button>
                            </div>
                        </div>
                    </div>
                    <div class="course">
                        <div class="left">
                            <el-checkbox v-model="checked1" size="large" class="checkbox" />
                            <div class="left-img">
                                <img src="/images/课程02.jpg" alt="">
                            </div>
                            <div class="right-text">
                                <h4>lester☆☆☆☆☆</h4>
                                <p>入职培训</p>
                                <p>课程长约：0分0秒 | 共<span>1</span>个章节</p>
                                <p>系统管理员创建于2022/6/28上次更新：2022/6/10</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="number">
                                <div>
                                    <p>0</p>
                                    <p>课程收入</p>
                                </div>
                                <div>
                                    <p>0</p>
                                    <p>学习人数</p>
                                </div>
                                <div>
                                    <p>0</p>
                                    <p>访问人数</p>
                                </div>
                            </div>
                            <div class="all-btn">
                                <el-button class="all-btn-small">置顶课程</el-button>
                                <el-button class="all-btn-small">编辑章节</el-button>
                                <el-button class="all-btn-small">学习记录</el-button>
                                <el-button class="all-btn-small">统计分析</el-button>
                                <el-button class="all-btn-small">设置</el-button>
                                <el-button class="all-btn-small">更多<el-icon class="el-icon--right el-icon--right-more">
                                        <IEparrow-down />
                                    </el-icon></el-button>
                            </div>
                        </div>
                    </div>
                    <div class="course">
                        <div class="left">
                            <el-checkbox v-model="checked1" size="large" class="checkbox" />
                            <div class="left-img">
                                <img src="/images/课程03.jpg" alt="">
                            </div>
                            <div class="right-text">
                                <h4>新员工入职培训☆☆☆☆☆</h4>
                                <p>入职培训</p>
                                <p>课程长约：0分0秒 | 共<span>5</span>个章节</p>
                                <p>系统管理员创建于2022/6/28上次更新：2022/6/12</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="number">
                                <div>
                                    <p>200</p>
                                    <p>课程收入</p>
                                </div>
                                <div>
                                    <p>6</p>
                                    <p>学习人数</p>
                                </div>
                                <div>
                                    <p>20</p>
                                    <p>访问人数</p>
                                </div>
                            </div>
                            <div class="all-btn">
                                <el-button class="all-btn-small">置顶课程</el-button>
                                <el-button class="all-btn-small">编辑章节</el-button>
                                <el-button class="all-btn-small">学习记录</el-button>
                                <el-button class="all-btn-small">统计分析</el-button>
                                <el-button class="all-btn-small">设置</el-button>
                                <el-button class="all-btn-small">更多<el-icon class="el-icon--right el-icon--right-more">
                                        <IEparrow-down />
                                    </el-icon></el-button>
                            </div>
                        </div>
                    </div>
                    <div class="course">
                        <div class="left">
                            <el-checkbox v-model="checked1" size="large" class="checkbox" />
                            <div class="left-img">
                                <img src="/images/课程04.jpg" alt="">
                            </div>
                            <div class="right-text">
                                <h4>新员工入职培训☆☆☆☆☆</h4>
                                <p>入职培训</p>
                                <p>课程长约：0分0秒 | 共<span>2</span>个章节</p>
                                <p>系统管理员创建于2022/6/28上次更新：2022/7/23</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="number">
                                <div>
                                    <p>0</p>
                                    <p>课程收入</p>
                                </div>
                                <div>
                                    <p>2</p>
                                    <p>学习人数</p>
                                </div>
                                <div>
                                    <p>3</p>
                                    <p>访问人数</p>
                                </div>
                            </div>
                            <div class="all-btn">
                                <el-button class="all-btn-small">置顶课程</el-button>
                                <el-button class="all-btn-small">编辑章节</el-button>
                                <el-button class="all-btn-small">学习记录</el-button>
                                <el-button class="all-btn-small">统计分析</el-button>
                                <el-button class="all-btn-small">设置</el-button>
                                <el-button class="all-btn-small">更多<el-icon class="el-icon--right el-icon--right-more">
                                        <IEparrow-down />
                                    </el-icon></el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
</script>

<style scoped>
.box {
    height: 582px;
    background-color: #F5F6FA;
    box-shadow: 0px 0px 10px 0px #0000001A;
    padding: 10px;
}

* {
    margin: 0 auto;
}

.header {
    color: #ccc;
}

.header span {
    font-size: 12px;
    font-weight: bold;
    margin: 10px 15px;
}

.header span:nth-child(1) {
    color: #ccc;
    margin-left: 70px;
    border-left: 4px solid #3797FD;
    padding-left: 10px;
}

.header span:nth-child(2) {
    color: #000;
}

.containe {
    display: flex;
    margin: 20px 0;
    justify-content: space-around;
}

.card {
    width: 300px;
    height: 90px;
    border-radius: 10px;
    box-shadow: 10px 10px 10px 4px #0000001A;
    position: relative;
}

.card p {
    margin: 10px 0 0 20px;
    color: #fff;
    font-size: 13px;
}

.card p span {
    font-size: 25px;
    font-weight: bold;
    margin-right: 10px;
}

.card img {
    width: 70px;
    height: 70px;
    position: absolute;
    right: 40px;
    top: 10px;
    opacity: 0.7;
}

.card:nth-child(1) {
    background-color: #3792FD;
    margin-left: 0px;
}

.card:nth-child(2) {
    background-color: #F86D74;
}

.card:nth-child(3) {
    background-color: #1CC9B0;
}

.card:nth-child(4) {
    background-color: #C064F3;
}

.body {
    width: 1200px;
    height: 421px;
    background-color: #fff;
    margin-top: 20px;
    box-shadow: 10px 10px 10px 4px #0000001A;
    padding: 10px;
}

.big-box::-webkit-scrollbar {
    display: none;
}


.btn-small {
    border: 1px solid #409EFF;
    color: #409EFF !important;
}

.mr-2 {
    float: right;
    margin-right: 20px;
}

.num {
    display: flex;
    font-size: 13px;
    line-height: 40px;
    color: #ccc;
    margin-top: 20px;
}

.num * {
    color: #ccc;
}

.el-checkbox {
    margin-right: 10px;
}

.el-pagination {
    margin-right: 10px;
}

.el-dropdown-link {
    border: 1px solid #ccc;
    width: 50px;
    height: 10px;
    margin-top: 7px !important;
    padding: 5px 0 10px 5px;
}

.el-dropdown-link-two {
    width: 100px;
    height: 10px;
    border-radius: 3px;
    margin-left: 615px !important;
}

.el-icon--right {
    margin-left: 15px !important;
}

.el-icon--right-two {
    margin-left: 25px !important;
}

.num span {
    margin: 0 10px;
}

.big-box {
    height: 339px;
    overflow-y: auto;
    scrollbar-width: none;
}

.hidding {
    height: 700px;
}

.course {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.hidding .left {
    display: flex;
}

.hidding .left .right-text {
    margin: 10px 0 0 10px;
}

.hidding .left .right-text p {
    margin: 15px 0 0 0;
}

.hidding .left .right-text p:nth-child(2),
.hidding .left .right-text p:nth-child(4) {
    font-size: 13px;
    color: #ccc;
}

.hidding .left .right-text p:nth-child(3) {
    font-size: 14px;
}

.hidding .left .right-text p:nth-child(3) span {
    font-size: 16px;
    color: red;
    font-weight: bold;
}

.checkbox {
    margin-top: 50px;
}

.hidding .left img {
    width: 180px;
    height: 120px;
    margin: 10px 0 0 10px;
}

.hidding .right .number {
    display: flex;
    margin-top: 20px;
}

.hidding .right .number div:nth-child(1),
.hidding .right .number div:nth-child(2),
.hidding .right .number div:nth-child(3) {
    text-align: center;
    font-size: 14px;
}

.hidding .right .number div:nth-child(1) p:nth-child(1),
.hidding .right .number div:nth-child(2) p:nth-child(1),
.hidding .right .number div:nth-child(3) p:nth-child(1) {
    color: blue;
    font-size: 20px;
    font-weight: bold;
}

.all-btn-small {
    margin-top: 30px;
    width: 70px;
    color: skyblue !important;
}
</style>